{% extends 'base.html' %}
{% load static %}

{% block title %}资产列表管理 - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
  .asset-table {
    font-size: 14px;
  }
  
  .asset-table th {
    padding: 12px 8px;
    white-space: nowrap;
  }
  
  .asset-table td {
    padding: 12px 8px;
    vertical-align: middle;
  }
  
  .asset-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
  }
  
  .asset-image:hover {
    transform: scale(1.1);
    border-color: #0d6efd;
  }
  
  .status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }
  
  .asset-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
  }
  
  .asset-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #0d6efd;
  }
  
  .filter-panel {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
  
  @media (max-width: 768px) {
    .asset-table th,
    .asset-table td {
      padding: 8px 4px;
      font-size: 12px;
    }
    
    .asset-image {
      width: 40px;
      height: 40px;
    }
  }
</style>
{% endblock %}

{% block content %}
<!-- 面包屑导航 -->
<nav aria-label="breadcrumb" class="mb-4">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
    <li class="breadcrumb-item active" aria-current="page">资产列表</li>
  </ol>
</nav>

<!-- 页面标题和操作按钮 -->
<div class="card mb-4">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-md-6">
        <h1 class="h3 mb-1">资产列表</h1>
        <p class="text-muted mb-0">管理企业所有固定资产的基础信息与状态</p>
      </div>
      <div class="col-md-6">
        <div class="d-flex flex-wrap gap-2 justify-content-md-end">
          <!-- 搜索框 -->
          <form method="get" class="d-flex" style="min-width: 300px;">
            <input type="text" name="search" class="form-control" placeholder="搜索资产卡号/型号规格..." 
                   value="{{ search_query }}">
            <button class="btn btn-outline-secondary" type="submit">
              <i class="bi bi-search"></i>
            </button>
          </form>
          
          <!-- 操作按钮 -->
          <a href="{% url 'assets:asset_create' %}" class="btn btn-outline-primary">
            <i class="bi bi-upload"></i> 导入
          </a>
          
          <a href="{% url 'assets:asset_create' %}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> 新增资产
          </a>
          
          <!-- 视图切换 -->
          <div class="btn-group" role="group">
            <button type="button" id="tableViewBtn" class="btn btn-outline-secondary active">
              <i class="bi bi-list"></i> 表格
            </button>
            <button type="button" id="cardViewBtn" class="btn btn-outline-secondary">
              <i class="bi bi-grid-3x3-gap"></i> 卡片
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 数据统计卡片 -->
<div class="row mb-4">
  <div class="col-md-2 col-sm-6 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title text-muted mb-1">总资产数</h5>
            <h3 class="mb-0">{{ page_obj.paginator.count }}</h3>
          </div>
          <div class="text-primary">
            <i class="bi bi-box" style="font-size: 2rem;"></i>
          </div>
        </div>
        <small class="text-success">
          <i class="bi bi-arrow-up"></i> 5.2% 较上月
        </small>
      </div>
    </div>
  </div>
  
  <div class="col-md-2 col-sm-6 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title text-muted mb-1">在用资产</h5>
            <h3 class="mb-0">{{ stats.in_use_count|default:0 }}</h3>
          </div>
          <div class="text-success">
            <i class="bi bi-check-circle" style="font-size: 2rem;"></i>
          </div>
        </div>
        <small class="text-success">
          <i class="bi bi-arrow-up"></i> 3.8% 较上月
        </small>
      </div>
    </div>
  </div>
  
  <div class="col-md-2 col-sm-6 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title text-muted mb-1">维修中</h5>
            <h3 class="mb-0">{{ stats.maintenance_count|default:0 }}</h3>
          </div>
          <div class="text-warning">
            <i class="bi bi-wrench" style="font-size: 2rem;"></i>
          </div>
        </div>
        <small class="text-danger">
          <i class="bi bi-arrow-up"></i> 7.5% 较上月
        </small>
      </div>
    </div>
  </div>
  
  <div class="col-md-2 col-sm-6 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title text-muted mb-1">待处理</h5>
            <h3 class="mb-0">{{ stats.pending_count|default:0 }}</h3>
          </div>
          <div class="text-info">
            <i class="bi bi-clock" style="font-size: 2rem;"></i>
          </div>
        </div>
        <small class="text-success">
          <i class="bi bi-arrow-down"></i> 1.3% 较上月
        </small>
      </div>
    </div>
  </div>
</div>

{% block content %}
<!-- 面包屑导航 -->
<nav aria-label="breadcrumb" class="mb-4">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
    <li class="breadcrumb-item active" aria-current="page">资产列表</li>
  </ol>
</nav>

<!-- 页面标题和操作按钮 -->
<div class="card mb-4">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col-md-6">
        <h1 class="h3 mb-1">资产列表</h1>
        <p class="text-muted mb-0">管理企业所有固定资产的基础信息与状态</p>
      </div>
      <div class="col-md-6">
        <div class="d-flex flex-wrap gap-2 justify-content-md-end">
          <!-- 搜索框 -->
          <form method="get" class="d-flex" style="min-width: 300px;">
            <input type="text" name="search" class="form-control" placeholder="搜索资产卡号/型号规格..." 
                   value="{{ search_query }}">
            <button class="btn btn-outline-secondary" type="submit">
              <i class="bi bi-search"></i>
            </button>
          </form>
          
          <!-- 操作按钮 -->
          <a href="{% url 'assets:asset_create' %}" class="btn btn-outline-primary">
            <i class="bi bi-upload"></i> 导入
          </a>
          
          <a href="{% url 'assets:asset_create' %}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> 新增资产
          </a>
          
          <!-- 视图切换 -->
          <div class="btn-group" role="group">
            <button type="button" id="tableViewBtn" class="btn btn-outline-secondary active">
              <i class="bi bi-list"></i> 表格
            </button>
            <button type="button" id="cardViewBtn" class="btn btn-outline-secondary">
              <i class="bi bi-grid-3x3-gap"></i> 卡片
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 数据统计卡片 -->
<div class="row mb-4">
  <div class="col-md-2 col-sm-6 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title text-muted mb-1">总资产数</h5>
            <h3 class="mb-0">{{ page_obj.paginator.count }}</h3>
          </div>
          <div class="text-primary">
            <i class="bi bi-box" style="font-size: 2rem;"></i>
          </div>
        </div>
        <small class="text-success">
          <i class="bi bi-arrow-up"></i> 5.2% 较上月
        </small>
      </div>
    </div>
  </div>
  
  <div class="col-md-2 col-sm-6 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title text-muted mb-1">在用资产</h5>
            <h3 class="mb-0">{{ stats.in_use_count|default:0 }}</h3>
          </div>
          <div class="text-success">
            <i class="bi bi-check-circle" style="font-size: 2rem;"></i>
          </div>
        </div>
        <small class="text-success">
          <i class="bi bi-arrow-up"></i> 3.8% 较上月
        </small>
      </div>
    </div>
  </div>
  
  <div class="col-md-2 col-sm-6 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title text-muted mb-1">维修中</h5>
            <h3 class="mb-0">{{ stats.maintenance_count|default:0 }}</h3>
          </div>
          <div class="text-warning">
            <i class="bi bi-wrench" style="font-size: 2rem;"></i>
          </div>
        </div>
        <small class="text-danger">
          <i class="bi bi-arrow-up"></i> 7.5% 较上月
        </small>
      </div>
    </div>
  </div>
  
  <div class="col-md-2 col-sm-6 mb-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title text-muted mb-1">待处理</h5>
            <h3 class="mb-0">{{ stats.pending_count|default:0 }}</h3>
          </div>
          <div class="text-info">
            <i class="bi bi-clock" style="font-size: 2rem;"></i>
          </div>
        </div>
        <small class="text-success">
          <i class="bi bi-arrow-down"></i> 1.3% 较上月
        </small>
      </div>
    </div>
  </div>
</div>

<!-- 主要内容区：筛选栏 + 列表 -->
<div class="row">
  <!-- 左侧筛选面板 -->
  <div class="col-lg-3 mb-4">
    <div class="card filter-panel">
      <div class="card-header">
        <h5 class="mb-0">
          <i class="bi bi-funnel me-2"></i>筛选条件
        </h5>
      </div>
      <div class="card-body">
        <form method="get" id="filterForm">
          <div class="mb-3">
            <label class="form-label">资产类别</label>
            <select name="category" class="form-select">
              <option value="">全部类别</option>
              {% for category in categories %}
              <option value="{{ category.id }}" {% if category_filter|add:"0" == category.id %}selected{% endif %}>
                {{ category.name }}
              </option>
              {% endfor %}
            </select>
          </div>
          
          <div class="mb-3">
            <label class="form-label">资产状态</label>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="status" value="active" id="status_active" 
                     {% if 'active' in status_filter %}checked{% endif %}>
              <label class="form-check-label" for="status_active">
                <span class="badge bg-success me-1">●</span>在用
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="status" value="idle" id="status_idle"
                     {% if 'idle' in status_filter %}checked{% endif %}>
              <label class="form-check-label" for="status_idle">
                <span class="badge bg-secondary me-1">●</span>闲置
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="status" value="maintenance" id="status_maintenance"
                     {% if 'maintenance' in status_filter %}checked{% endif %}>
              <label class="form-check-label" for="status_maintenance">
                <span class="badge bg-warning me-1">●</span>维修中
              </label>
            </div>
                                <i class="fas fa-th-large mr-1"></i>卡片
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- 表格视图 -->
        <div id="tableView" class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            {% if page_obj %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                <div class="flex items-center space-x-1">
                                    <i class="fas fa-hashtag text-slate-400"></i>
                                    <span>资产编号</span>
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                <div class="flex items-center space-x-1">
                                    <i class="fas fa-cube text-slate-400"></i>
                                    <span>资产名称</span>
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                <div class="flex items-center space-x-1">
                                    <i class="fas fa-tags text-slate-400"></i>
                                    <span>类别</span>
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                <div class="flex items-center space-x-1">
                                    <i class="fas fa-circle text-slate-400"></i>
                                    <span>状态</span>
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                <div class="flex items-center space-x-1">
                                    <i class="fas fa-user text-slate-400"></i>
                                    <span>使用人</span>
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                <div class="flex items-center space-x-1">
                                    <i class="fas fa-building text-slate-400"></i>
                                    <span>部门</span>
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                <div class="flex items-center space-x-1">
                                    <i class="fas fa-calendar text-slate-400"></i>
                                    <span>购入日期</span>
                                </div>
                            </th>
                            <th class="px-6 py-4 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                <div class="flex items-center justify-center space-x-1">
                                    <i class="fas fa-cogs text-slate-400"></i>
                                    <span>操作</span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-slate-100">
                        {% for asset in page_obj %}
                        <tr class="table-row-hover">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-mono font-medium text-slate-900">{{ asset.asset_number }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    {% if asset.image %}
                                        <img class="h-10 w-10 rounded-lg object-cover mr-3" src="{{ asset.image.url }}" alt="{{ asset.name }}">
                                    {% else %}
                                        <div class="h-10 w-10 rounded-lg bg-slate-100 flex items-center justify-center mr-3">
                                            <i class="fas fa-cube text-slate-400"></i>
                                        </div>
                                    {% endif %}
                                    <div>
                                        <div class="text-sm font-medium text-slate-900">{{ asset.name }}</div>
                                        {% if asset.description %}
                                            <div class="text-sm text-slate-500 truncate max-w-xs">{{ asset.description|truncatechars:30 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-800">
                                    {{ asset.category.name|default:"未分类" }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {% if asset.status == 'in_use' %}
                                    <span class="status-badge bg-green-100 text-green-700">
                                        <i class="fas fa-check-circle mr-1"></i>在用
                                    </span>
                                {% elif asset.status == 'idle' %}
                                    <span class="status-badge bg-yellow-100 text-yellow-700">
                                        <i class="fas fa-pause-circle mr-1"></i>闲置
                                    </span>
                                {% elif asset.status == 'maintenance' %}
                                    <span class="status-badge bg-red-100 text-red-700">
                                        <i class="fas fa-tools mr-1"></i>维修中
                                    </span>
                                {% elif asset.status == 'scrapped' %}
                                    <span class="status-badge bg-gray-100 text-gray-700">
                                        <i class="fas fa-trash mr-1"></i>报废
                                    </span>
                                {% else %}
                                    <span class="status-badge bg-blue-100 text-blue-700">
                                        <i class="fas fa-info-circle mr-1"></i>{{ asset.get_status_display }}
                                    </span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600">
                                {% if asset.current_user %}
                                    <div class="flex items-center">
                                        <div class="h-8 w-8 rounded-full bg-primary text-white flex items-center justify-center text-xs font-medium mr-2">
                                            {{ asset.current_user.get_full_name|first|upper }}
                                        </div>
                                        {{ asset.current_user.get_full_name }}
                                    </div>
                                {% else %}
                                    <span class="text-slate-400">未分配</span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600">
                                {{ asset.location.department.name|default:"未分配" }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600">
                                {{ asset.purchase_date|date:"Y-m-d" }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                <div class="flex items-center justify-center space-x-2">
                                    <a href="{% url 'assets:asset_detail' asset.id %}" class="inline-flex items-center px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-md hover:bg-blue-100 transition-colors btn-action" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{% url 'assets:asset_update' asset.id %}" class="inline-flex items-center px-2 py-1 text-xs font-medium text-slate-600 bg-slate-50 rounded-md hover:bg-slate-100 transition-colors btn-action" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    {% if asset.qr_code %}
                                        <a href="{% url 'assets:asset_qr_code' asset.id %}" class="inline-flex items-center px-2 py-1 text-xs font-medium text-info bg-cyan-50 rounded-md hover:bg-cyan-100 transition-colors btn-action" title="二维码">
                                            <i class="fas fa-qrcode"></i>
                                        </a>
                                    {% endif %}
                                    <button onclick="confirmDelete('{{ asset.id }}', '{{ asset.name }}')" class="inline-flex items-center px-2 py-1 text-xs font-medium text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors btn-action" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-16">
                <div class="mx-auto h-24 w-24 text-slate-300">
                    <i class="fas fa-inbox text-6xl"></i>
                </div>
                <h3 class="mt-4 text-lg font-medium text-slate-900">暂无资产数据</h3>
                <p class="mt-2 text-sm text-slate-500">请点击下方按钮添加第一个资产</p>
                <div class="mt-6">
                    <a href="{% url 'assets:asset_create' %}" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm font-medium rounded-lg hover:bg-blue-600 transition-colors">
                        <i class="fas fa-plus mr-2"></i>
                        新增资产
                    </a>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- 卡片视图 (默认隐藏) -->
        <div id="cardView" class="hidden">
            {% if page_obj %}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                {% for asset in page_obj %}
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden card-hover">
                    <!-- 资产图片 -->
                    <div class="relative h-48 bg-gradient-to-br from-slate-50 to-slate-100">
                        {% if asset.image %}
                            <img src="{{ asset.image.url }}" alt="{{ asset.name }}" class="w-full h-full object-cover">
                        {% else %}
                            <div class="w-full h-full flex items-center justify-center">
                                <div class="text-center">
                                    <i class="fas fa-cube text-4xl text-slate-300 mb-2"></i>
                                    <p class="text-xs text-slate-400">暂无图片</p>
                                </div>
                            </div>
                        {% endif %}
                        <!-- 状态徽章 -->
                        <div class="absolute top-3 right-3">
                            {% if asset.status == 'in_use' %}
                                <span class="status-badge bg-green-100 text-green-700">
                                    <i class="fas fa-check-circle mr-1"></i>在用
                                </span>
                            {% elif asset.status == 'idle' %}
                                <span class="status-badge bg-yellow-100 text-yellow-700">
                                    <i class="fas fa-pause-circle mr-1"></i>闲置
                                </span>
                            {% elif asset.status == 'maintenance' %}
                                <span class="status-badge bg-red-100 text-red-700">
                                    <i class="fas fa-tools mr-1"></i>维修中
                                </span>
                            {% elif asset.status == 'scrapped' %}
                                <span class="status-badge bg-gray-100 text-gray-700">
                                    <i class="fas fa-trash mr-1"></i>报废
                                </span>
                            {% else %}
                                <span class="status-badge bg-blue-100 text-blue-700">
                                    <i class="fas fa-info-circle mr-1"></i>{{ asset.get_status_display }}
                                </span>
                            {% endif %}
                        </div>
                        <!-- 类别标签 -->
                        <div class="absolute top-3 left-3">
                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-white bg-opacity-90 text-slate-700 rounded-md">
                                <i class="fas fa-tag mr-1"></i>{{ asset.category.name|default:"未分类" }}
                            </span>
                        </div>
                    </div>
                    
                    <!-- 卡片内容 -->
                    <div class="p-6">
                        <!-- 资产名称和编号 -->
                        <div class="mb-4">
                            <h3 class="text-lg font-semibold text-slate-900 mb-1 truncate" title="{{ asset.name }}">{{ asset.name }}</h3>
                            <p class="text-sm font-mono text-slate-500">{{ asset.asset_number }}</p>
                        </div>
                        
                        <!-- 资产信息 -->
                        <div class="space-y-2 mb-4">
                            <div class="flex items-center text-sm text-slate-600">
                                <i class="fas fa-user w-4 text-slate-400 mr-2"></i>
                                <span class="truncate">{{ asset.current_user.get_full_name|default:"未分配" }}</span>
                            </div>
                            <div class="flex items-center text-sm text-slate-600">
                                <i class="fas fa-building w-4 text-slate-400 mr-2"></i>
                                <span class="truncate">{{ asset.location.department.name|default:"未分配" }}</span>
                            </div>
                            <div class="flex items-center text-sm text-slate-600">
                                <i class="fas fa-calendar w-4 text-slate-400 mr-2"></i>
                                <span>{{ asset.purchase_date|date:"Y-m-d" }}</span>
                            </div>
                            {% if asset.description %}
                            <div class="flex items-start text-sm text-slate-600">
                                <i class="fas fa-info-circle w-4 text-slate-400 mr-2 mt-0.5"></i>
                                <span class="line-clamp-2">{{ asset.description|truncatechars:60 }}</span>
                            </div>
                            {% endif %}
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                            <a href="{% url 'assets:asset_detail' asset.id %}" class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-primary bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors btn-action">
                                <i class="fas fa-eye mr-1"></i>查看详情
                            </a>
                            <div class="flex items-center space-x-1">
                                <a href="{% url 'assets:asset_update' asset.id %}" class="inline-flex items-center p-2 text-slate-600 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors btn-action" title="编辑">
                                    <i class="fas fa-edit text-xs"></i>
                                </a>
                                {% if asset.qr_code %}
                                    <a href="{% url 'assets:asset_qr_code' asset.id %}" class="inline-flex items-center p-2 text-info bg-cyan-50 rounded-lg hover:bg-cyan-100 transition-colors btn-action" title="二维码">
                                        <i class="fas fa-qrcode text-xs"></i>
                                    </a>
                                {% endif %}
                                <button onclick="confirmDelete('{{ asset.id }}', '{{ asset.name }}')" class="inline-flex items-center p-2 text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition-colors btn-action" title="删除">
                                    <i class="fas fa-trash text-xs"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-16">
                <div class="mx-auto h-24 w-24 text-slate-300">
                    <i class="fas fa-inbox text-6xl"></i>
                </div>
                <h3 class="mt-4 text-lg font-medium text-slate-900">暂无资产数据</h3>
                <p class="mt-2 text-sm text-slate-500">请点击下方按钮添加第一个资产</p>
                <div class="mt-6">
                    <a href="{% url 'assets:asset_create' %}" class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm font-medium rounded-lg hover:bg-blue-600 transition-colors">
                        <i class="fas fa-plus mr-2"></i>
                        新增资产
                    </a>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="页面导航" class="mt-6">
            <div class="flex items-center justify-between px-4 py-3 sm:px-6">
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示第 <span class="font-medium">{{ page_obj.start_index }}</span> 至 <span class="font-medium">{{ page_obj.end_index }}</span> 条，共 <span class="font-medium">{{ page_obj.paginator.count }}</span> 条记录
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                            {% if page_obj.has_previous %}
                                <a href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">上一页</span>
                                    <i class="fas fa-chevron-left text-xs"></i>
                                </a>
                            {% endif %}
                            
                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">{{ num }}</span>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <a href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">{{ num }}</a>
                                {% endif %}
                            {% endfor %}
                            
                            {% if page_obj.has_next %}
                                <a href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <span class="sr-only">下一页</span>
                                    <i class="fas fa-chevron-right text-xs"></i>
                                </a>
                            {% endif %}
                        </nav>
                    </div>
                </div>
            </div>
        </nav>
        {% endif %}
    </div>
</div>

<!-- 确认删除模态框 -->
<div id="deleteModal" class="fixed inset-0 flex items-center justify-center z-50 hidden">
    <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"></div>
    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md relative z-10 transform transition-all">
        <div class="text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-danger/10 text-danger mb-4">
                <i class="fas fa-exclamation-triangle text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">确认删除</h3>
            <p class="text-gray-600 mb-6">您确定要删除该资产吗？此操作无法撤销。</p>
            <div class="flex justify-center space-x-4">
                <button id="cancelDelete" class="px-6 py-2.5 bg-gray-200 text-gray-700 font-medium rounded-lg hover:shadow-lg transition-all duration-300">
                    取消
                </button>
                <button id="confirmDelete" class="px-6 py-2.5 bg-danger text-white font-medium rounded-lg hover:shadow-lg transition-all duration-300">
                    确认删除
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 视图切换功能
function switchView(viewType) {
    const tableView = document.getElementById('tableView');
    const cardView = document.getElementById('cardView');
    const tableBtn = document.getElementById('tableViewBtn');
    const cardBtn = document.getElementById('cardViewBtn');
    
    if (viewType === 'table') {
        tableView.classList.remove('hidden');
        cardView.classList.add('hidden');
        tableBtn.classList.add('bg-primary', 'text-white');
        tableBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
        cardBtn.classList.remove('bg-primary', 'text-white');
        cardBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
        localStorage.setItem('assetViewMode', 'table');
    } else {
        tableView.classList.add('hidden');
        cardView.classList.remove('hidden');
        cardBtn.classList.add('bg-primary', 'text-white');
        cardBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
        tableBtn.classList.remove('bg-primary', 'text-white');
        tableBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
        localStorage.setItem('assetViewMode', 'card');
    }
}

// 视图切换按钮事件
document.getElementById('tableViewBtn').addEventListener('click', function() {
    switchView('table');
});

document.getElementById('cardViewBtn').addEventListener('click', function() {
    switchView('card');
});

// 删除确认功能
let deleteAssetId = null;

function confirmDelete(assetId, assetName) {
    deleteAssetId = assetId;
    document.getElementById('deleteModal').classList.remove('hidden');
}

document.getElementById('cancelDelete').addEventListener('click', function() {
    document.getElementById('deleteModal').classList.add('hidden');
    deleteAssetId = null;
});

document.getElementById('confirmDelete').addEventListener('click', function() {
    if (deleteAssetId) {
        // 这里可以添加实际的删除逻辑
        alert('资产删除功能需要后端支持');
        document.getElementById('deleteModal').classList.add('hidden');
        deleteAssetId = null;
    }
});

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 恢复用户的视图偏好
    const savedViewMode = localStorage.getItem('assetViewMode');
    if (savedViewMode) {
        switchView(savedViewMode);
    }
    
    // 筛选器变化时自动提交表单
    document.querySelector('select[name="status"]').addEventListener('change', function() {
        document.getElementById('searchForm').submit();
    });
    
    document.querySelector('select[name="category"]').addEventListener('change', function() {
        document.getElementById('searchForm').submit();
    });
    
    // 搜索输入框回车提交
    document.querySelector('input[name="search"]').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            document.getElementById('searchForm').submit();
        }
    });
});

// 键盘快捷键支持
document.addEventListener('keydown', function(e) {
    // Ctrl + N 新增资产
    if (e.ctrlKey && e.key === 'n') {
        e.preventDefault();
        window.location.href = "{% url 'assets:asset_create' %}";
    }
    
    // Ctrl + F 聚焦搜索框
    if (e.ctrlKey && e.key === 'f') {
        e.preventDefault();
        document.querySelector('input[name="search"]').focus();
    }
    
    // Ctrl + 1 切换到表格视图
    if (e.ctrlKey && e.key === '1') {
        e.preventDefault();
        switchView('table');
    }
    
    // Ctrl + 2 切换到卡片视图
    if (e.ctrlKey && e.key === '2') {
        e.preventDefault();
        switchView('card');
    }
});
</script>
{% endblock %}
